<template>
	<view>
		<view class="topBox">
			<view class="citybox" @click="showTime = true">
				<view class="citytext">{{ timeStr }}</view>
				<image class="rimg" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png"
					mode="widthFix"></image>
			</view>
			<view class="topScreenBox">
				<view class="searchCell">
					<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/search.png"
						class="searchimg">
					</image>
					<view class="scInp">
						<input type="text" v-model="searchContent" placeholder="请输入门店名称" maxlength="50"
							placeholder-class="placname" @input="blurSearch" />
					</view>
					<view class="scBtnBox">
						<view class="scSumBtn" @click="subSearch">搜索</view>
					</view>
				</view>
			</view>

		</view>
		<view class="list">
			<block v-if="list.length > 0">
				<view class="list_item" v-for="(item, index) in list " :key="index">
					<view class="top" style="border-bottom: none;">
						<!-- <image src="/static/tab/my_act.png" mode=""></image> -->
						<text>昵称：{{ item.UserName || '' }}</text>
						<text>店铺名称：{{ item.ShopName || '' }}</text>

						<text>商家电话：{{ item.ServerPhone }}</text>
					</view>
					<view class="top" style="display: block;">
						<view>店铺地址：{{ item.Address || '' }}</view>
						<!-- <view>抽成:{{item.percentage||''}}</view> -->
					</view>
					<view class="bottom">
						<view class="status">
							<text style="margin-bottom: 0;">营业状态：</text>
							<view :class="!item.IsState ? 'off_line' : 'on_line'">{{ !item.IsState ? '离线' : '在线' }}
							</view>
						</view>
						<!-- <view class="remove">
					移除
				</view> -->
					</view>
					<view class="top" style="border-bottom: none;margin-top: 20rpx;">
						<!-- <image src="/static/tab/my_act.png" mode=""></image> -->
						<text>代理商：{{ item.DaiLiName || '无代理' }}</text>
						<text v-if='item.DaiLiName != "无代理商"'>代理商分成：{{ item.TotalDMoney || 0 }}元</text>
						<text>月-总金额 ：{{ item.TotalSMoney || 0 }}元</text>
						<text>订单数 ：{{ item.TotalOrders || 0 }}单</text>
						<!-- <text>纸张：{{ item.TotalSpPage || 0 }}张</text> -->
					</view>
				</view>
			</block>
			<block v-else>
				<EmptyBox text="暂无商家~"></EmptyBox>
			</block>

		</view>
		<u-datetime-picker ref="datetimePicker" :show="showTime" v-model="value1" mode="year-month"
			:formatter="formatter" :maxDate="maxDate" @confirm="confirm" @cancel="closePick"></u-datetime-picker>
	</view>

</template>

<script>
export default {
	components: {

	},
	data() {
		return {
			list: [],
			id: null,
			user: {},
			searchContent: '',
			showTime: false,
			value1: Number(new Date()),
			timeStr: '',//显示选择的时间中文显示
			columns: [1, 2, 3],
			maxDate: Number(new Date()),
			PageIndex: 1,
			PageSize: 10,
			isMore: true
		};
	},
	onLoad(e) {
		this.id = e?.ID
		this.user = uni.getStorageSync('user')
		this.getList()
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
	methods: {
		confirm(e) {
			console.log(e);
			this.value1 = e.value
			this.PageIndex == 1
			this.getList()
			this.closePick()
		},
		closePick() {
			this.showTime = false
		},
		blurSearch() {
			if (this.searchContent == '') {
				this.PageIndex == 1
				this.getList()
			}

		},
		subSearch() {
			this.getList()
		},
		async getList() {
			let that = this
			if (that.PageIndex == 1) {
				that.list = []
			}
			let time = that.$util.unixDatetime(that.value1, 'yy-mm')
			console.log(time, 'ttt');
			that.timeStr = time
			let year = time.split('-')[0]
			let month = time.split('-')[1]
			uni.showLoading({
				title: '加载中'
			});
			let url = that.id ? 'MLogin/GetsDaiAnalysis' : 'MLogin/GetsShopsAnalysis'
			console.log(that.PageIndex, 'ccc	');
			let data = {
				Year: year,
				Month: month,
				PageIndex: that.PageIndex,
				PageSize: that.PageSize,
				ShopName: that.searchContent,
				ID: that.id
			}
			let res = await this.$api.post(url, data)
			if (res?.code == 0) {
				that.list = [...that.list, ...res?.data]
				that.isMore = res?.data.length >= that.PageSize
			}else{
				that.$pv.msg('获取失败')
				that.PageIndex = that.PageIndex -1
			}
			uni.hideLoading();

		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}

		},
	},
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex = this.PageIndex + 1

			this.getList()
		}

	}

}
</script>
<style>
page {
	background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
text {
	margin-bottom: 20rpx;
}

.off_line {
	width: 72rpx;
	height: 40rpx;
	background: #F6F6F6;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #666666;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
}

.on_line {
	width: 72rpx;
	height: 40rpx;
	background: #E5F8F2;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #00BA82;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
}

.remove {
	width: 96rpx;
	height: 48rpx;
	border-radius: 8rpx;
	border: 1rpx solid #FF4B4B;
	font-weight: 500;
	font-size: 24rpx;
	color: #FF4B4B;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list_item {
	display: flex;
	flex-direction: column;
	padding: 24rpx;
	width: 702rpx;
	// height: 216rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 20rpx;

	.top {
		box-sizing: content-box;
		// padding-bottom: 30rpx;
		// border-bottom: 1rpx solid #fafafa;
		display: flex;
		flex-direction: column;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.bottom {
		.status {
			display: flex;
			align-items: center;

		}

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		margin-top: 20rpx;
	}
}

.list {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 24rpx;
	margin-top: 30rpx;
	padding-top: 90rpx;
}

.topBox {
	width: 100%;
	// background: linear-gradient(180deg, #deddfc 0%, #ededf9 100%);
	background-color: #dde7fd;
	padding: 4rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

	.citybox {
		padding: 18rpx 6rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		margin-right: 24rpx;

		.citytext {
			width: max-content;
			font-size: 24rpx;
			color: #333333;
			font-weight: bold;
			margin: 0 8rpx;
		}

		.rimg {
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-top: 4rpx;
		}
	}

	.topScreenBox {
		width: 100%;
		padding: 8rpx 0;

		.searchCell {
			width: 100%;
			height: 72rpx;
			display: flex;
			align-items: center;
			border: 2rpx solid #3572fe;
			border-radius: 36rpx;

			.scIcon {
				margin-right: 16rpx;
			}

			.searchimg {
				width: 32rpx;
				height: 32rpx;
				margin-left: 24rpx;
			}

			.scInp {
				flex: 1;
				margin-left: 5rpx;

				>input {
					width: 100%;
					background: transparent;
				}

				.placname {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.scBtnBox {
				display: flex;
				// margin-left: auto;
				margin-right: 8rpx;

				.scSumBtn {
					padding: 13rpx 34rpx;
					background: #3572fe;
					border-radius: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&:last-child {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
</style>
